<template>
  <view class="logisticsInfo" >
    <block v-if="logisticsInfo">
      <view class="info_title">
        <image :src="logisticsInfo.fileUrl" class="title_iamge"></image>
        <view class="title_content">
          <view>{{logisticsInfo.productName}}</view>
          <text>{{logisticsInfo.expName}}:{{logisticsInfo.number}}</text>
        </view>
      </view>
      <view class="info_content">
        <view class='expressRecord' v-if="logisticsInfo.list.length > 0">
          <!-- 顶部收货地址 -->
          <view class='expressRecord-getAddress'>
            <view class='expressRecord-top'>
              <view class='getAddress-icon' :style="{backgroundImage: 'url(' + $store.state.imgBaseUrl + '/arrive-end.png)'}"></view>
              <view class='add-line'></view>
              <view class='getAddress-text'>[收货地址] {{logisticsInfo.address}}</view>
            </view>
          </view>
          <!-- 顶部收货地址半个时间轴线 -->
          <view class='noReach-online-top-close'></view>
          <!-- 单个物流记录点时间轴：物流状态 -->
          <view class='expressRecord-single-close' v-for="(item,index) in logisticsInfo.list" :key='index'>
            <view class='expressRecord-single-noReach-online-top-close'>
              <view class='online-top-close'></view>
              <view :class="index == 0 ? 'dot-closing': 'dot-close'" :style="{backgroundImage: index == 0 ? 'url(' + $store.state.imgBaseUrl + '/arrive.png)' : ''}"></view>
              <!-- <view :class="index == logisticsInfo.list.length-1 ? 'online-bottomd': 'online-bottom'"></view> -->
            </view>
            <view class='expressRecord-text'>
              <view :class="index == 0? 'expressRecord-status-addressing' :'expressRecord-status-address'">{{item.status}}</view>
            </view>
            <view class='expressRecord-date'>
              <view class='expressRecord-date-text'>
                {{item.time}}
              </view>
            </view>
          </view>
        </view>
        <view class="nodates" v-else>
          暂无物流
        </view>
      </view>
    </block>
    <view class="nodates" v-else>
      暂无物流信息
    </view>
  </view>
</template>
<script>
import { logistics } from '@/service/purchaseShop/order.service.js'
export default {
  data() {
    return {
      height: 0,
      logisticsInfo: null,
      orderId: ''
    };
  },
  onLoad(option) {
    this.orderId = option.id
  },
  onShow:function() {
    this.getlogisticsList()
  },
  methods:{
    getlogisticsList () {
      let params = {
        id: this.orderId
        // id: 16857
      }
      logistics(params, res => {
        if (res.status == 0) {
          this.logisticsInfo = res.data;
          console.log(res.data)
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    },
  }
}
</script>

<style lang="scss">
.nodates {
  text-align: center;
  font-size: 28rpx;
  color: #666666;
  padding-top: 30rpx;
}
.logisticsInfo{
  min-height: 100vh;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  flex-direction: column;
  .info_title{
    width:100%;
    height:156rpx;
    background:linear-gradient(-76deg,rgba(252,17,34,1) 0%,rgba(249,117,91,1) 100%);
    display: flex;
    align-items: center;
    padding: 18rpx 0 16rpx;
    .title_iamge{
      width:127rpx;
      height:127rpx;
      border-radius:6rpx;
      margin-left: 89rpx;
    }
    .title_content{
      margin-left: 29rpx;
      width:400rpx;
      font-size:26rpx;
      font-family:PingFang SC;
      font-weight:500;
      color:rgba(255,255,255,1);
      display: flex;
      flex-direction: column;
      view{
        width:482rpx;
        height:71rpx;
        line-height:35rpx;
        font-size:26rpx;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        white-space: normal !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      text{
        font-size:22rpx;
        margin-top: 10rpx;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(255,255,255,1);
      }
    }
  }
  .info_content{
    // width: 100%;
    // height: 100%;
    background:#FFFFFF;
    overflow: hidden;
    overflow-y: scroll;
    .expressRecord {
      // width: 100%;
      padding: 49rpx 30rpx 50rpx;
      background: #fff;
      margin: 0 auto;
      border-radius: 10rpx;
    }
    .expressRecord-getAddress {
      // width: 100%;
      font-size: 22rpx;
      color: #999;
      display: flex;
    }
    .expressRecord-top {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      // align-items: center;
      position: relative;
      .add-line {
        width: 4rpx;
        height: 20rpx;
        background: #E1E1E1;
        position: absolute;
        bottom: 0;
        left: 164rpx;
      }
    }
    .getAddress-icon {
      width: 32rpx;
      height: 42rpx;
      // border-radius: 50%;
      // background: #999;
      font-size: 18rpx;
      color: #fff;
      // display: flex;
      // justify-content: center;
      // align-items: center;
      margin-left: 150rpx;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      z-index: 1;
    }
    .getAddress-text {
      width: 497rpx;
      margin-left: 32rpx;
      line-height: 35rpx;
      font-size:25rpx;
      font-family:PingFang SC;
      font-weight:500;
      color:rgba(153,153,153,1);
    }
    .noReach-online-top-close {
      width: 4rpx;
      // height: 50rpx;
      // height: 100%;
      background: #d7d7d7;
      margin-left: 157rpx;
      position: absolute;
      // top: 0;
    }
    .expressRecord-single-close {
      // width: 100%;
      min-height: 122rpx;
      padding: 10rpx 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;
    }
    .expressRecord-single-noReach-online-top-close {
      display: flex;
      flex-direction: column;
    }
    .online-top-closing {
      width: 4rpx;
      height: 50rpx;
      background: #d7d7d7;
      margin-left: 117rpx;
    }
    // .online-top-close {
    //   width: 4rpx;
    //   height: 50rpx;
    //   background:rgba(225,225,225,1);
    //   margin-left: 157rpx;
    // }
    .online-top-close {
      width: 4rpx;
      min-height: 50rpx;
      height: 100%;
      background:rgba(225,225,225,1);
      // margin-left: 157rpx;
      margin-left: 164rpx;
      position: absolute;
      top: 0;
    }
    .dot-closing {
      width: 54rpx;
      height: 54rpx;
      margin-left: 140rpx;
      // margin-top: 6rpx;
      // margin-bottom: 6rpx;
      // background: #fe4f33;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      z-index: 1;
    }
    .dot-close {
      width: 13rpx;
      height: 13rpx;
      border-radius: 50%;
      margin-left: 160rpx;
      // margin-top: 6rpx;
      // margin-bottom: 6rpx;
      background:rgba(153,153,153,1);
      z-index: 1;
    }
    .online-bottom {
      width: 4rpx;
      height: 50rpx;
      background:rgba(225,225,225,1);
      margin-left: 157rpx;
    }
    .online-bottomd {
      width: 4rpx;
      height: 50rpx;
      background:#FFFFFF;
      margin-left: 157rpx;
    }
    .online-bottom-start {
      width: 4rpx;
      height: 50rpx;
      /* background: #999; */
      margin-left: 117rpx;
    }
    .expressRecord-text {
      // width: 497rpx;
      margin-left: 20rpx;
    }
    .expressRecord-statusing {
      font-size: 26rpx;
      color: #333;
    }
    .expressRecord-status-addressing {
      font-size:25rpx;
      // width: 482rpx;
      font-family:PingFang SC;
      font-weight:500;
      color:rgba(51,51,51,1);
    }
    .expressRecord-status {
      font-size: 26rpx;
      color: #999;
    }
    .expressRecord-status-address {
      font-size: 22rpx;
      color: #999;
    }
    .expressRecord-dating {
      position: absolute;
      height: 100%;
      width:80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-size:21rpx;
      font-family:PingFang SC;
      font-weight:500;
      color:rgba(102,102,102,1);
    }
    .expressRecord-date {
      position: absolute;
      height: 100%;
      width:140rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      font-size:21rpx;
      font-family:PingFang SC;
      font-weight:500;
      color:rgba(102,102,102,1);
    }
    .expressRecord-date-text {
      font-size: 24rpx;
    }
  }
}

</style>
